<script setup>
import { onMounted,onUnmounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSynopsis } from "../api/home.js";
import Dialog from "../component/dialog/index.vue";
import bgImage1 from "../public/assets/home/middle_home_bg.png";
import bgImage2 from "../public/assets/home/primary_home_bg.png";
import bookReadingImage1 from "../public/assets/home/textbook_audio1.png";
import bookReadingImage2 from "../public/assets/home/textbook_audio2.png";
import voiceEvaluationImage1 from "../public/assets/home/voice_evaluation1.png";
import voiceEvaluationImage2 from "../public/assets/home/voice_evaluation2.png";
import textbookPointReadingImage1 from "../public/assets/home/textbook_point_reading1.png";
import textbookPointReadingImage2 from "../public/assets/home/textbook_point_reading2.png";
import closeImageSrc from "../public/assets/home/dialog_introduction_close.png";
import headerImageSrc from "../public/assets/home/dialog_introduction_header_bg.png";
const router = useRouter();
const route = useRoute();
const dialogOpen = ref(false);
const gradeId = ref(window.gradeId);
const gradeType = ref(gradeId.value > 61 ? 'middle' : 'primary');
const data = ref({});
const bgImage = ref(gradeType.value === "primary"?bgImage2:bgImage1);
const bookReadingImage = ref(gradeType.value === "primary"?bookReadingImage2:bookReadingImage1);
const voiceEvaluationImage = ref(gradeType.value === "primary"?voiceEvaluationImage2:voiceEvaluationImage1);
const textbookPointReadingImage = ref(gradeType.value === "primary"?textbookPointReadingImage2:textbookPointReadingImage1);
const closeImage = ref(closeImageSrc);
const headerImage = ref(headerImageSrc);
const articleImage = ref("");
const articleTitle = ref("");
const articleLabel = ref("");
const articleName = ref("");
const articleIsbn = ref("");
//console.log("gradeId",localStorage.getItem("gradeId"))
// gradeId.value = localStorage.getItem("gradeId");
// gradeId.value = route.query.gradeId;

onMounted(async () => {
//	if (!route.query.gradeId) {
//		gradeId.value = 51;
//		localStorage.setItem("gradeId", 51);
//		localStorage.setItem("gradeType", "primary");
//	} else {
//		gradeId.value = route.query.gradeId;
//	}

	const resource = await getSynopsis(gradeId.value);
	data.value = resource;
	articleImage.value = data.value.image;
	articleTitle.value = data.value.title;
	articleLabel.value = data.value.label;
	articleName.value = data.value.name;
	articleIsbn.value = data.value.isbn;
	localStorage.setItem("startPage",data.value.page);
	document.body.style.overflow = "hidden";
});
// gradeType.value = localStorage.getItem("gradeType");
onUnmounted(()=>{
	document.body.style.overflow = "unset";
});

const goToBook = () => {
	window.location.href = `http://127.0.0.1:29941/tb_data/eightA/#/book?t=${new Date().getTime()}`;
	// window.location.href = 'http://127.0.0.1:5174/#/book';

};

</script>
<script></script>
<template>
	<main :style="{ backgroundImage: `url(${bgImage})` }">
		<img alt="" class="back" src="../public/assets/home/home_back.png" />
		<aside>
			<article id="home_article">
				<img :src="articleImage" alt=""/>
				<section>
					<p class="color1 font1">{{ articleTitle }}</p>
					<p class="color1 font1">{{ articleLabel }}</p>
					<p class="color2 font2">{{ articleName }}</p>
					<button class="font2" style="background-color:#61bd66;" @click="dialogOpen = true">简介</button>
					<p class="color3 font2">{{ articleIsbn }}</p>
				</section>
			</article>
		</aside>
		<nav>
<!--			<div id="pointReadingBox" @click="router.push({ name: 'pointReading' })"><img alt=""-->
<!--					:src="textbookPointReadingImage" /></div>-->
			<img id="pointReadingBox" @click="router.push({ name: 'pointReading' })" alt="" :src="textbookPointReadingImage"/>
			<img alt="" :src="bookReadingImage" @click="router.push('/book-reading')" />
			<!-- <img alt="" :src="voiceEvaluationImage" @click="router.push('/book')" /> -->
			<img alt="" :src="voiceEvaluationImage" @click="goToBook" />
		</nav>
		<footer><img alt="" src="../public/assets/home/logo@2x.png" /></footer>
		<!-- <modal :open="dialogOpen" :close-img="closeImage" close-position="left" dialog-radius header :header-background="`url(${headerImage})`" @close="dialogOpen = false">
			<template #title>简介</template>
			<template #content>
				<div id="introDialog_content">
					<div id="introDialog_content_left" class="intro">
						<p>{{ data.describe }}</p>
					</div>
					<div id="introDialog_content_right" class="intro">
						<p v-show="data.publisher">
							出&nbsp;&nbsp;版&nbsp;&nbsp;人：<span v-for="item of data.publisher">
							<span v-for="i in item" v-if="item.length === 2">{{ i }}&nbsp;&nbsp;&nbsp;</span>
							<span v-else>{{ item }}&nbsp;&nbsp;&nbsp;</span></span>
						</p>
						<p v-show="data.make">
							监&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;制：<span v-for="item of data.make">
							<span v-for="i in item" v-if="item.length === 2">{{ i }}&nbsp;&nbsp;&nbsp;</span>
							<span v-else>{{ item }}&nbsp;&nbsp;&nbsp;</span></span>
						</p>
						<p v-show="data.design">
							策&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;划：<span v-for="item of data.design">
							<span v-for="i in item" v-if="item.length === 2">{{ i }}&nbsp;&nbsp;&nbsp;</span>
							<span v-else>{{ item }}&nbsp;&nbsp;&nbsp;</span></span>
						</p>
						<p v-show="data.authorize">
							内容审定：<span v-for="item of data.authorize"><span v-for="i in item" v-if="item.length === 2">{{ i }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<span v-else>{{ item }}&nbsp;&nbsp;&nbsp;</span></span>
						</p>
						<p v-show="data.responsibility">
							责任编辑：<span v-for="item of data.responsibility"><span v-for="i in item" v-if="item.length === 2">{{ i }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<span v-else>{{ item }}&nbsp;&nbsp;&nbsp;</span></span>
						</p>
						<p v-show="data.technology">
							技术编辑：<span v-for="item of data.technology"><span v-for="i in item" v-if="item.length === 2">{{ i }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<span v-else>{{ item }}&nbsp;&nbsp;&nbsp;</span></span>
						</p>
						<p v-show="data.recitation" style="display: flex;"><span>朗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;读：</span><p class="paragraph_11"><span v-for="item of data.recitation">{{ item }}&nbsp;</span></p></p>
						<p v-show="data.production" style="display: flex;"><span>研发制作：</span><p><p v-for="item of data.production"><span v-for="i in item" v-if="item.length === 2">{{ i }}&nbsp;&nbsp;&nbsp;</span>
							<span v-else>{{ item }}&nbsp;&nbsp;&nbsp;</span></p></p></p>
						<p>出版发行：<span v-for="item of data.publish">{{ item }}&nbsp;&nbsp;&nbsp;</span></p>
					</div>
				</div>
			</template>
		</modal> -->

		<Dialog :open="dialogOpen">
			<div class="dialog-intro-wrap font2">
				<div class="dialog-title font2" :style="{ backgroundImage: `url(${headerImage})` }">
					<img :src="closeImage" alt="" @click="dialogOpen = false" />
					<span :style="{ color: '#F18C15'}">简介</span>
				</div>
				<div id="introDialog_content">
					<div id="introDialog_content_left" class="intro font2">
						<p>{{ data.describe }}</p>
					</div>
					<div id="introDialog_content_right" class="intro font2">
						<p v-show="data.publisher">
							出<span style="margin: 0 3%;">版</span>人：<span v-for="item of data.publisher">
								<span v-for="i in item" v-if="item.length === 2">{{ i }}&#12288;</span>
								<span v-else>{{ item }}&#12288;</span></span>
						</p>
						<p v-show="data.make">
							监&#12288;&#12288;制：<span v-for="item of data.make">
								<span v-for="i in item" v-if="item.length === 2">{{ i }}&#12288;</span>
								<span v-else>{{ item }}&#12288;</span></span>
						</p>
						<p v-show="data.design">
							策&#12288;&#12288;划：<span v-for="item of data.design">
								<span v-for="i in item" v-if="item.length === 2">{{ i }}&#12288;</span>
								<span v-else>{{ item }}&#12288;</span></span>
						</p>
						<p v-show="data.authorize">
							内容审定：<span v-for="item of data.authorize"><span v-for="i in item" v-if="item.length === 2">{{ i
							}}&#12288;</span>
								<span v-else>{{ item }}&#12288;</span></span>
						</p>
						<p v-show="data.responsibility">
							责任编辑：<span v-for="item of data.responsibility"><span v-for="i in item"
									v-if="item.length === 2">{{ i }}&#12288;</span>
								<span v-else>{{ item }}&#12288;</span></span>
						</p>
						<p v-show="data.technology">
							技术编辑：<span v-for="item of data.technology"><span v-for="i in item" v-if="item.length === 2">{{ i
							}}&#12288;</span>
								<span v-else>{{ item }}&#12288;</span></span>
						</p>
						<p v-show="data.recitation" style="display: flex;">
							<span style="white-space:nowrap;">朗&#12288;&#12288;读：</span>
						<p class="paragraph_11">
							<span style="display:inline-block;" v-for="item of data.recitation">{{ item }}&nbsp;</span>
						</p>
						</p>
						<p v-show="data.production" style="display: flex;"><span style="white-space:nowrap;">研发制作：</span>
						<p>
						<p v-for="item of data.production"><span v-for="i in item" v-if="item.length === 2">{{ i
						}}&#12288;</span>
							<span v-else>{{ item }}&#12288;</span>
						</p>
						</p>
						</p>
						<p style="display: flex;"><span style="white-space:nowrap;">出版发行：</span><p><span v-for="item of data.publish">{{ item }}&#12288;</span></p></p>
					</div>
				</div>
			</div>

		</Dialog>

	</main>
</template>
<style scoped>
main {
	background-size: 100% 100%;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 90% 10%;
	height: 100%;
	width: 100%;
}

.back {
	cursor: pointer;
	display: none;
	left: 2%;
	position: absolute;
	top: 2%;
	width: 3%;
}

aside {
	align-items:center;
	display:flex;
	justify-content:center;
	padding-top:4%;
	margin-left:9%;
}

article {
	background-image: url("../public/assets/home/bookshelf.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 10%;
	padding-left: 4%;
	width: 72%;
}

#home_article {
	height: auto;
	flex: unset;
}

article img {
	margin-bottom: 3%;
	vertical-align: bottom;
	width: 7.5rem;
	margin-left:5%;
}

section {
	display: inline-block;
	width: 62%;
}

section p {
	padding-left:8%;
	font-size:0.9rem;
    white-space: nowrap;
}

.color1 {
	color: #000;
}

.color2 {
	color: #444;
}

.color3 {
	color: #666;
}
.font1{
	font-family:FZLTDHK--GBK1, serif;
}
.font2{
	font-family:FZLTZHUNHK-GBK1, serif;
}
button {
	border: none;
	border-radius: 0.5rem;
	color: white;
	cursor: pointer;
	font-size: 100%;
	margin-left: 8%;
	padding: 2%;
	position: relative;
	width: 20%;
	height: 14%;
	font-family: FZLTDHK--GBK1, serif;
	transform:scale(1);
	transition:transform 1s ease 0s;
}

button:hover {
	cursor: pointer;
	transition:.5s;
	transform:scale(1.05);
}

nav {
	align-items: center;
	display: flex;
	padding-top:5.5%;
}

nav img,
#pointReadingBox {
	width: 25%;
	transform:scale(1);
	transition:transform 1s ease 0s;
}


nav img {
	margin: 0 3%;
}
#pointReadingBox{
	margin-left:-11.5%;
}

nav>img:hover,
#pointReadingBox:hover {
	cursor: pointer;
	transition:.5s;
	transform:scale(1.05);
}

#pointReadingBox {
	position: relative;
}

#pointReadingBox img:first-child {
	width: 100%;
}

#pointReadingBook {
	left: 50%;
	position: absolute;
	top: 48%;
	width: 40%;
}

footer {
	align-items: center;
	display: flex;
	grid-column-end: 3;
	grid-column-start: 1;
	height: 20%;
	justify-content: center;
	width: 100%;
}

footer img {
	width: 18.12%;
	margin-top:1%;
}

.dialog-intro-wrap {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    /* height: 50%; */
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    border-radius: 1rem;
	font-size:0.6rem;
}

.dialog-title {
	position: relative;
	width: 100%;
	height: 3.5rem;
}

.dialog-title img {
	position: absolute;
    top: 50%;
    left: 3%;
	transform: translateY(-50%);
    width: 1.6rem;
	cursor: pointer;
}

.dialog-title span {
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.1rem;
}

#introDialog_content {
	display: flex;
	justify-content: space-around;
}

.intro {
	background: #fffcf9;
	border: 1px solid #fef4e8;
	border-radius: 20px;
	box-sizing: border-box;
	margin: 1% 0;
	padding: 2%;
	width: 48%;
}

#introDialog_content_right {
	text-align: justify;
}

#introDialog_content p {
	line-height: 1.5;
	margin: 0;
	text-align: justify;
	text-indent: 2em;
	font-size: 1rem;
}

/* @media screen and (max-width:5000px){
	#introDialog_content p{
		font-size:x-large;
	}
}
@media screen and (min-width:5000px){
	#introDialog_content p{
		font-size:xxx-large;
	}
}
@media screen and (max-width:2000px){
	#introDialog_content p{
		font-size:large;
	}
} */
#introDialog_content_right p {
	margin: 0;
	text-indent: 0;
}</style>
